<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view style="background-color: #fff;padding: 0 30rpx 0  30rpx;">
			<u--form labelWidth="160rpx" labelPosition="left" :model="model1" :rules="rules" ref="uForm">

				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" placeholder="请填写姓名" border="none"></u--input>
				</u-form-item>

				<u-form-item label="学号" prop="userInfo.studentID" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.studentID" placeholder="请填写学号" border="none"></u--input>
				</u-form-item>

				<u-form-item label="电话" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone" placeholder="请填写本人电话" border="none"></u--input>
				</u-form-item>

				<u-form-item label="报修区域" prop="userInfo.area" borderBottom @click="show0 = true; "
					ref="item1"><!-- hideKeyboard() -->
					<u--input v-model="model1.userInfo.area" disabled disabledColor="#ffffff" placeholder="报修区域"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item v-if="model1.userInfo.area.split(',')[1]=='学生宿舍区'" label="宿舍号" prop="userInfo.address"
					borderBottom ref="item1">
					<u--input v-model="model1.userInfo.address" placeholder="请填写宿舍号" border="none"></u--input>
				</u-form-item>

				<u-form-item v-else-if="model1.userInfo.area.split(',')[1]!=='学生宿舍区'" label="详细地址"
					prop="userInfo.address" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.address" placeholder="请填写详细地址" border="none"></u--input>
				</u-form-item>


				<u-form-item label="故障类型" prop="userInfo.type" borderBottom @click="show1 = true; "
					ref="item1"><!-- hideKeyboard() -->
					<u--input v-model="model1.userInfo.type" disabled disabledColor="#ffffff" placeholder="选择故障类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="故障描述" prop="userInfo.desc" borderBottom ref="item1">
					<u--textarea v-model="model1.userInfo.desc" maxlength='100' disableDefaultPadding='true' count
						autoHeight placeholder="请填写故障详细描述" border="none"></u--textarea>
				</u-form-item>


				<u-form-item label="报修方式" prop="radiovalue1" borderBottom ref="item2">
					<u-radio-group v-model="model1.radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginRight: '30rpx'}" label-size="15px"
							v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
							@change="radioChange">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item v-if="model1.radiovalue1=='预约报修'" label="选择日期" prop="userInfo.date" borderBottom
					@click="showdate = true; " ref="item1">
					<u--input v-model="model1.userInfo.date" disabled disabledColor="#ffffff" placeholder="选择预约日期"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>



				<u-form-item label="选择时间" prop="userInfo.time" borderBottom @click="setTime" ref="item1">
					<u--input v-model="model1.userInfo.time" disabled disabledColor="#ffffff" placeholder="选择上门时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- 
			<u-form-item label="上传故障图片">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="10"
					:previewFullImage="true"></u-upload>
			</u-form-item> -->

				<view style="font-size: 15px;color:#303133;padding:13px 0;">上传故障图片</view>
				<u-upload :capture="['album', 'camera']" :fileList="fileList1" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="1" :previewFullImage="true"></u-upload>

				<!-- <u-form-item label="上传故障图片">
				<view class="upload-container">
					<button @click="chooseImage">选择图片</button>
					<image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image>
					<button v-if="true" @click="uploadImage">上传图片</button>
				</view>
			</u-form-item> -->

				<!-- <u-form-item v-if="condition1" label="选择时间" prop="userInfo.time" borderBottom @click="show2 = true; "
					ref="item1">
					<u--input v-model="model1.userInfo.time" disabled disabledColor="#ffffff" placeholder="报修时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->

				<!-- <u-form-item v-if="condition2" label="选择时间" prop="userInfo.time" borderBottom @click="show3 = true; "
					ref="item1">
					<u--input v-model="model1.userInfo.time" disabled disabledColor="#ffffff" placeholder="报修时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->

				<!-- 用户服务协议和隐私政策 -->

				<view class="agreement"
					style="width: 100%;font-size: 12px;margin-top:10px;display: flex;justify-content: center;align-items: center;">
					<u-checkbox-group>
						<u-checkbox @change="agree=!agree" shape="circle" iconSize="10px" labelSize="12px"
							v-model="agree" label="我已阅读并同意">
						</u-checkbox>
					</u-checkbox-group>
					<span @click="gotoAgreement" style="color: #3C9CFF;">《苏应校园宽带用户隐私保护说明》</span>

				</view>
				<u-button type="primary" text="提交" customStyle="margin-top: 25px" @click="submit"></u-button>
			</u--form>

		</view>

		<!-- <u-action-sheet class="u-action-sheet-content" :show="show0" :actions="actions" title="请选择区域" description="描述"
			@close="show0 = false" @select="areaSelect">
			
		</u-action-sheet> -->

		<u-picker closeOnClickOverlay :show="show0" ref="uPicker" :columns="columns" @confirm="confirm"
			@cancel="cancelHandler" @change="changeHandler" @close="show0 = false">
		</u-picker>

		<u-action-sheet :show="show1" :actions="actions1" title="请选择故障类型" @close="show1 = false" @select="typeSelect">
		</u-action-sheet>

		<u-calendar closeOnClickOverlay @close="showdate = false" :show="showdate" :mode="mode"
			@confirm="confirmdate"></u-calendar>

		<u-picker closeOnClickOverlay :show="showtime" :columns="columnTime" @confirm="timeSelect"
			@cancel="cancelHandler" @close="showtime = false">
		</u-picker>

		<u-action-sheet :show="show2" :actions="actions2" title="请选择xxx" description="描述" @close="show2 = false"
			@select="timeSelect">
		</u-action-sheet>

		<u-action-sheet :show="show3" :actions="actions3" title="请选择xxx" description="描述" @close="show3 = false"
			@select="timeSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		createOrder
	} from '../../api/api.js'

	export default {
		data() {
			return {
				mode: 'single',
				show0: false,
				show1: false,
				show2: false,
				show3: false,
				showdate: false,
				showtime: false,
				condition1: false,
				condition2: false,
				//图片
				fileList1: [],
				img1: '',
				imageUrl: null,
				file: null,
				agree: false,
				columns: [
					['苏州大学应用技术学院'],
					['学生宿舍区', '其他']
				],
				columnTime: [
					['9:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00',
						'16:00-17:00', '17:00-18:00', '18:00-19:00', '19:00-20:00', '20:00-21:00', '21:00-22:00'
					]
				],
				model1: {
					userInfo: {
						name: '江志豪',
						studentID: '2116461047',
						// sex: '',
						area: '苏州大学应用技术学院,学生宿舍区',
						phone: '15957664718',
						address: '21408',
						type: '无法上网',
						date: '',
						time: '',
						desc: ''
					},
					// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
					radiovalue1: '立即报修'
				},

				// model1: {
				// 	userInfo: {
				// 		name: '',
				// 		studentID: '',
				// 		// sex: '',
				// 		area: '',
				// 		phone: '',
				// 		address: '',
				// 		type: '',
				// 		date: '',
				// 		time: '',
				// 		desc: ''
				// 	},
				// 	// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				// 	radiovalue1: '立即报修'
				// },
				actions: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},


				],
				actions1: [{
						name: '网速太慢',
					},
					{
						name: '无法上网',
					},
					{
						name: '其他原因',
					}
				],
				actions2: [{
						name: '男生时间xx-xxxxxx',
					},
					{
						name: '12:00-14:00',
					},
					{
						name: '14:00-16:00',
					},
					{
						name: '16:00-18:00',
					},

				],
				actions3: [{
						name: '女生时间xx-xxxxxx',
					},
					{
						name: '12:00-14:00',
					},
					{
						name: '14:00-16:00',
					},

				],
				// 基本案列数据
				radiolist1: [{
						name: '立即报修',
						disabled: false
					},
					{
						name: '预约报修',
						disabled: false
					},

				],

				rules: {
					'userInfo.name': {
						type: 'string',
						max: 8,
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.studentID': {
						type: 'string',
						required: true,
						message: '请填写学号',
						trigger: ['blur', 'change']
					},
					'userInfo.area': {
						type: 'string',
						required: true,
						message: '请选择地区',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': {
						type: 'string',
						max: 14,
						required: true,
						message: '请填写本人电话',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						max: 30,
						required: true,
						message: '请填写正确信息',
						trigger: ['blur', 'change']
					},
					'userInfo.type': {
						type: 'string',
						max: 30,
						required: true,
						message: '请填写报修类型',
						trigger: ['blur', 'change']
					},
					'userInfo.desc': {
						type: 'string',
						max: 100,
						required: true,
						message: '请填写故障描述',
						trigger: ['blur', 'change']
					},
					'userInfo.time': {
						type: 'string',
						required: true,
						message: '请选择上门时间',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			// 用户点击确认按钮后，这里会被执行
			confirm(e) {
				const myarea = e.value.join()
				this.model1.userInfo.area = myarea
				this.show0 = false
				console.log(e.value)
				console.log(this.model1.userInfo.area)
			},
			cancelHandler() {
				// 用户点击取消按钮后，这里会被执行
				console.log('cancel');
			},

			confirmdate(e) {
				const mydate = e.join()
				console.log(e);
				this.model1.userInfo.date = mydate
				this.showdate = false

			},

			areaSelect(e) {
				this.model1.userInfo.area = e.area
				// this.$refs.uForm.validateField('userInfo.sex')
			},

			typeSelect(e) {
				this.model1.userInfo.type = e.name
				// this.$refs.uForm.validateField('userInfo.sex')
			},
			timeSelect(e) {
				console.log(e)
				this.model1.userInfo.time = e.value[0]
				this.showtime = false
				// this.$refs.uForm.validateField('userInfo.sex')
			},
			groupChange(n) {
				console.log(this.model1)
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			setTime(n) {
				this.showtime = true;
				this.columnTime
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				var arry = []
				this.fileList1.filter((v, i) => {
					arry.push(v.url)
				})
				this.img1 = arry
				console.log(this.img1, "1");
			},
			//新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'success'
					})
				})

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			submit() {
				// 处理提交表单的逻辑submit() {
				console.log('model1', this.model1);
				console.log('fileList1', this.fileList1);
				var model1Data = this.model1.userInfo
				//重构请求数据
				var tempData = {}
				tempData.nick_name = model1Data.name
				tempData.studentID = model1Data.studentID
				tempData.tel = model1Data.phone
				tempData.region = model1Data.area
				tempData.address = model1Data.addr
				tempData.failure_type = model1Data.type
				tempData.failure_detail = model1Data.desc
				tempData.order_type = this.model1.radiovalue1
				tempData.desc = this.model1.desc
				tempData.order_time = model1Data.date + model1Data.time
				if (this.fileList1.length > 0) {
					tempData.file = this.fileList1[0].url
				}

				console.log('tempData', tempData)


				this.$refs.uForm.validate().then(res => {
					if (this.agree) {

						createOrder(tempData) //请求
						uni.showToast({
							'title': '提交成功',
							'icon': 'success'
						})
					} else {
						uni.showToast({
							'title': '未同意隐私协议',
							'icon': 'error'
						})
					}

				}).catch(errors => {
					uni.showToast({
						'title': '提交失败',
						'icon': 'error'
					})
				})
			},
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						this.imageUrl = res.tempFilePaths[0];
						this.file = res.tempFiles[0];
					},
				});
			},
			uploadImage() {
				console.log(this.file)
				console.log(this.imageUrl)
				uni.uploadFile({
					url: 'YOUR_UPLOAD_URL',
					filePath: this.file.path,
					name: 'image',
					formData: {
						// 添加额外的上传参数
						// 如果有需要的话
					},
					success: (res) => {
						// 处理上传成功的结果
					},
					fail: (err) => {
						// 处理上传失败的结果
					},
				});
			},
			// 跳转到用户服务协议页面
			gotoAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},




		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style>
	.u-form-item__body {
		background-color: #fff;

	}

	/* .u-form-item__body__left {
		margin-left: 30rpx;
	} */

	/* .u-action-sheet-content {
		height: 20px;
		max-height: 30%;
		overflow-y: auto;
	} */
	.u-textarea {
		padding: 10px 0 !important;
	}

	.upload-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>